<template>
  <div>
    <nav-bar :title="title"/>
    <div class="content_scroll">
      <div class="custom_bg">
        <img src="../../assets/img/help/custom_banner.png" alt="">
        <ul class="custom_info">
          <li class="custom_list">
            <img src="../../assets/img/help/ic_qq.png" alt="">
            <span class="custom_title_list">玩家QQ群</span>
            <span class="qq_number">741993115</span>
            <div class="btn">加入群聊</div>
          </li>
          <li class="custom_list">
            <img src="../../assets/img/help/ic_message.png" alt="">
            <span class="custom_title_list">电子邮件</span>
            <span class="qq_number">kefulingmao@foxmail.com</span>
            <div class="btn">点击复制</div>
          </li>
          <li class="custom_list">
            <img src="../../assets/img/help/ic_facebook.png" alt="">
            <span class="custom_title_list">Facebook主页</span>
            <span class="qq_number">104196441057708</span>
            <div class="btn">去关注</div>
          </li>
        </ul>
    </div>
    <div class="content-box">
      <div v-for="(list,index) in contentList" :key="index" class="content-list" @click="jumpClick(index)">
        <div class="content-img">
          <img :src="list.url" alt="">
          <h2>{{list.name}}</h2>
        </div>
        <div class="content-text">
          <div v-for="(text, id) in list.textlist" :key="id">{{text}}</div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import NavBar from '../../components/common/navbar/NavBar.vue'
export default {
  data() {
    return {
      title: '帮助&指南',
      contentList: [{
        id: 1,
        name: '回馈帮助',
        url: require('../../assets/img/help/ic_new_kefu_1.png'),
        textlist: [
          '·如何申请回馈',
          '·道具奖励申请方式',
          '·无法申请回馈',
          '·回馈未到怎么办',
          '·回馈到账时间',
          '·回馈到账不符',
          '·回馈到账方式',
          '·如何查看角色ID',
        ]
      },{
        id: 2,
        name: '储值帮助',
        url: require('../../assets/img/help/ic_new_kefu_2.png'),
        textlist: [
          '·充值/储值未到账',
          '·支付限额怎么办',
        ]
      },{
        id: 3,
        name: '账户安全',
        url: require('../../assets/img/help/ic_new_kefu_3.png'),
        textlist: [
          '·忘记账号',
          '·账号被盗',
          '·忘记密码',
        ]
      },{
        id: 4,
        name: '其他帮助',
        url: require('../../assets/img/help/ic_new_kefu_4.png'),
        textlist: [
          '·下载登录异常',
          '·电脑如何玩手游',
          '·游戏内悬浮球',
          '·iOS设置信任',
        ]
      }

      ]
    }
  },
  components: {
    NavBar,
  },   
  methods: {
    jumpClick(index) {
      if (index == 0) {
        return this.$router.push('/kefuhelp/typeid/1')
      } else if (index == 1) {
        return this.$router.push('/kefuhelp/typeid/2')
      } else if (index == 2) {
        return this.$router.push('/kefuhelp/typeid/3')
      } else if (index == 3) {
        return this.$router.push('/kefuhelp/typeid/4')
      }
    }
  },
}
</script>

<style lang="less" scoped>
.custom_bg {
  position: relative;
  width: 10rem;
  height: 8rem;
  img {
    width: 10rem;
    height: 5.333333rem;
  }
  .custom_info {
    box-sizing: border-box;
    padding: 0 .133333rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 9.466667rem;
    height: 4rem;
    background: #fff;
    border-radius: .266667rem;
    font-size: .4rem;
    .custom_list {
      box-sizing: border-box;
      display: flex;
      height: 1.333333rem;
      align-items: center;
      border-bottom: .013333rem solid #EEEEEE;
      .btn {
        font-size: .346667rem;
        color: #FF5543;
        width: 1.813333rem;
        height: .613333rem;
        border: .013333rem solid #FF5543;
        border-radius: .306667rem;
        flex-shrink: 1;
        text-align: center;
        line-height: .613333rem;
        margin-right: .133333rem;
      }
      img {
        margin: 0 .133333rem;
        flex-shrink: 1;
        display: inline-block;
        width: .773333rem;
        height: .773333rem;
      }
      .qq_number {
        flex: 1;
        font-size: .32rem;
        font-weight: 400;
        color: #666666;
        padding-left: .266667rem;
      }
    }
    .custom_list:last-child {
      border: 0;
    }
  }
}

.content-box {
  margin-top: .266667rem;
  box-sizing: border-box;
  padding: 0 .266667rem .266667rem;
}

.content-list {
  display: flex;
  align-items: center;
  background: #ffffff;
  padding: .266667rem 0;
  margin-bottom: .266667rem;
  border-radius: .266667rem;
}

.content-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2.8rem;
}

.content-img img {
  width: .906667rem;
  height: .906667rem;
}

.content-list h2 {
  font-size: .373333rem;
  color: #333333;
  margin: .133333rem 0 0 0;
}

.content-text {
  width: 6.666667rem;
  box-sizing: border-box;
  font-size: .346667rem;
  font-weight: 400;
  color: #222222;
  display: flex;
  flex-wrap: wrap;
}

.content-text div {
  width: 3.2rem;
  line-height: .666667rem;
}
</style>